<template>
    <div class="container">
        <h3>分级标准</h3>
            <el-row style="margin-top:20px;">
                <el-col :span="7">
                    <el-input placeholder="请输入关键词" v-model="searchName" style="width:300px;">
                        <i slot="prefix" class="el-input__icon el-icon-search" ></i>

                        <el-button slot="append" @click="handleSearch">搜索</el-button>
                    </el-input>
                </el-col>
				<el-button class='theme-button' v-if="!added" @click="goadd" style="float:right; margin-right: 10px">新增分级标准</el-button>

            </el-row>
            <el-table
                :data="tableData"
                border
                style="margin-top:20px;"
                ref="multipleTable"
                :header-cell-style="{ background: 'rgba(2,179,134,0.1)',color:'rgba(0,0,0,0.85)'}"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="productName" sortable label="品名"></el-table-column>
				<el-table-column prop="productGrade" sortable label="品级"></el-table-column>
                <el-table-column prop="standardsImg" sortable label="品级标准"></el-table-column>

                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            v-if="!edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            v-if="!del"
							style="color: red;"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage" :total="total"  @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>

    </div>
</template>

<script>
import {grade_findByList , grade_delete} from "@/request/api"
    export default {
        data() {
            return {
                total:0,
                currentPage:1,
                pagesize:10,
                searchName: '',
                tableData: [],
                form: {},
                idx: -1,
                id: -1,
                boxCode:'',
                boxCode1:'',
                del:true,
                added:true,
                edit:true,
                action:'',
            };
        },
        created(){

        },
        mounted(){
            this.init();
            this.judgmentAuthority();
        },
        methods: {
            goadd(){
				this.$router.push({
					path:'/grading/added'
				})
			},
            handleCurrentChange(val){
                this.currentPage = val
                this.init()
            },
            init(){
                let data = {
                    page:this.currentPage,
					productName:this.searchName
                }
                grade_findByList(data).then((res)=>{
                    this.tableData = res.rows
                    this.total = res.total
                })
            },
			handleCheck(index,row){

			},
            //搜索
            handleSearch(){
                this.currentPage = 1
				this.init()
            },
            //跳转编辑页面
            handleEdit(index,row){
                this.$router.push({
					path:'/grading/edit',
					query:{id:row.id}
				})
            },

            //删除
            handleDelete(index,row){

                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                   grade_delete(row.id).then((res)=>{
					   this.$notify({
					       title: '操作成功',
					       message: '删除成功',
					       type: 'success'
					   });
					   this.init()
				   })
                });
            },

            //判定操作按钮显示
            judgmentAuthority() {
                var type = JSON.parse(localStorage.getItem('panduanzhuangtai'));
                type.map((item1) => {
                    if (item1.name == '分级标准' && item1.children != null) {
                        for (var i = 0; i < item1.children.length; i++) {
                            if (item1.children[i].name == '新增') this.added = false;
                            if (item1.children[i].name == '编辑') this.edit = false;
                            if (item1.children[i].name == '删除') this.del = false;
                        }
                    }
                });
            }

        }
    }
</script>

<style scoped lang="less">
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
    background: #02B386;
}
/deep/.upload-daoru{
    background: #eee;
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px
    }
}
.el-table{ margin-top: 20px;}
 .el-pagination{
    text-align: center;
}
.el-pagination{
    text-align: right;
}
.el-col{
    margin-bottom:0;
}
</style>
